<template>
  <header class="title">
    <b class="iconfont fl" >&#xe624;</b>
    <p class="inp fl">
      <input type="text" placeholder="输入城市/景点/游玩主题"><i class="iconfont">&#xe61b;</i>
    </p>
    <router-link to="/city">
      <p class="fr">
        {{city}}
        <span class="iconfont">&#xe628;</span>
      </p>
    </router-link>
  </header>
</template>
<script>
  import {mapState} from 'vuex'
  export default{
    computed:{
      ...mapState(['city'])
  }
  }
</script>
<style scoped lang="stylus">
  @import "~@/assets/css/less.styl"
  .title{
    width:100%;
    height:0.44rem;
    line-height: .44rem;
    background-color: #00afc7;
    /*background-color:bgColor;*/
    color:#fff;
    overflow:hidden;
   position:fixed;
    z-index :10;
  }
  .title b{
    width:5%;
    display:block;
    padding-left:0.06em;
    padding-right:0.05rem;
    vertical-align:middle;
  }
  .inp{
    width:71%;
    position:relative;
    color:#e4e7ea;
  }
  .fl i{
    font-size: 0.18rem;
    position:absolute;
    top:-0.03rem;
    left:0.05rem;
  }
  .inp input{
    width:100%;
    height:0.3rem;
    outline:none;
    padding: 0px 0px;
   text-indent:0.25rem;
    box-sizing:border-box;
    border-radius:0.05rem;
    border:0;
  }
  input::-webkit-input-placeholder {
    color: #e4e7ea;
  }
  p{
    font-size:0.14rem;
  }

  span{
    color:#eee;
    font-size: 0.16rem;
  }
  a{
    display:block;
    color:#fff;
    font-size:0.14rem;
    line-height :0.44rem;
    padding-right:0.05rem;
  }
  .title fr{

  }
</style>
